// 文件拆分将写在main.js下的vuex代码放到这个文件下，在main.js中引入即可
// Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
import Vue from 'vue'
import Vuex from 'vuex' // 引入插件
// import axios from 'axios' // 引入axios插件
import book from './modules/book' // 引入modules下的book.js

import { getList } from '../services/products'
Vue.use(Vuex) // 使用Vuex
// 创建一个全局的vuex实例
const store = new Vuex.Store({
  // 表示全局的state数据
  state: {
    count: 1,
    list: [], // 初始数据，通过mutation改变
    pages: 1, // 初始总页数，通过mutation改变
    totals: 0, // 初始数据的总条数，通过mutation改变
    page: 1, // 当前页码（显示第一页的数据）
    cartcount: 0
  },
  // mutations是用来改变数据的，通过commit提交(触发)一个mutations的方法，改变数据重新渲染页面
  mutations: {
    // state数据全局可以拿到，
    // plus:function(state){state.count++}简写
    plus(state, step = 1) {
      // commit提交触发接受他传递的数据，未传时step形参默认值为1，
      // state表示原始状态的数据
      state.count += step
    },
    reducecount(state, step = 1) {
      // commit提交触发接受他传递的数据，未传时step形参默认值为1，
      // state表示原始状态的数据
      state.count -= step
    },
    // 参数1：原始数据
    // 参数2：commit触发的mutation所传的参数（获取到的数据）
    loadDataEnd(state, payload) {
      // state.list = payload.products
      state.list = [...state.list, ...payload.products]
      state.totals = payload.totalCount
      state.pages = payload.pages
      state.page++
    },
    // 点击购买commit触发的mutations中的buy
    // state是初始数据
    buy(state) {
      state.cartcount++
    }
  },
  actions: {
    // actions中的方法接受两个参数
    // 参数1：固定的是context,包含vuex的所有数据
    //     commit: ƒ boundCommit(type, payload, options)
    //     dispatch: ƒ boundDispatch(type, payload)
    //     getters: {}
    //     rootGetters: {}
    //     rootState: {__ob__: Observer}
    //     state: {__ob__: Observer}
    // 参数2：表示传递的数据dispatch时传递的数据
    // 解构赋值拿到dispatch派发时传递的数据
    // loadData({ commit }, { page }) {
    // console.log(context)
    // console.log(payload)
    //  解构赋值找对象context中的commit,然后用commit派发mutation
    // const { commit } = context
    // axios
    // .get('http://localhost:3009/api/v1/products?page=' + page)
    // page:page 此时page的值page就是传过来的this.$store.state.page
    // .get('http://localhost:3009/api/v1/products', {
    //   params: {
    //     page
    //   }
    // })
    // .then(res => {
    //   console.log(res.data)
    //   // 触发mutations中的loadDataEnd，并将获取的数据传过去,也可以直接写在参数一中
    //   commit('loadDataEnd', res.data)
    // })
    // 以上通过封装的网络请求实现
    // console.log(page)
    // 发送请求成功提交触发mutations中的loadDataEnd，并将获取的数据传过去
    // getList(page).then(res => {
    //   commit('loadDataEnd', res.data)
    // })
    // 还可以简写成下边的
    // 等待获取成功将返回的数据存入res中
    async loadData({ commit }, { page }) {
      const res = await getList(page)
      commit('loadDataEnd', res)
    }
    // 如果在request.js中设置了全局响应拦截并改变了返回值为response
    // 此时的res.data就是上边的res
    // async loadData({ commit }, { page }) {
    //   const res = await getList(page)
    //   commit('loadDataEnd', res.data)
    // }
  },
  // 类似于vuex中的计算属性，当数据改变之后重新计算它的值
  getters: {
    listCount(state) {
      return state.list.length
    }
  },
  modules: {
    book // book:book
  }
})
// 将store暴露出去在main.js中引用
export default store
